/*大屏左右切换动画*/
import {MotionVariants, useElementStyle, useMotion} from "@vueuse/motion";
import anime from 'animejs/lib/anime.es.js';

function getRandomInt(min, max) {
  min = Math.ceil(min); // 将min向上取整
  max = Math.floor(max); // 将max向下取整
  return Math.floor(Math.random() * (max - min + 1)) + min; // 返回min到max之间的随机整数
}

const motionAnimates = {
  1:{
    "left": ref<MotionVariants>({
      initial: {
        opacity: 0,
      },
      enter: {
        opacity: 1,
        transition: {
          delay: 500,
        },
      },
    }),
    "right": ref<MotionVariants>({
      initial: {
        opacity: 0,
      },
      enter: {
        opacity: 1,
        transition: {
          delay: 500,
        },
      },
    }),
  },
  2:{
    "left": ref<MotionVariants>({
      initial: {
        opacity: 0,
        height: "0px",
      },
      enter: {
        opacity: 1,
        height:"100%",
        transition: {
          delay: 500,
        },
      },
    }),
    "right": ref<MotionVariants>({
      initial: {
        opacity: 0,
        height: "0px",
      },
      enter: {
        opacity: 1,
        height:"100%",
        transition: {
          delay: 500,
        },
      },
    }),
  },
  3:{
    "left": ref<MotionVariants>({
      initial: {
        opacity: 0,
        y:800,
      },
      enter: {
        opacity: 1,
        y:0,
        transition: {
          delay: 300,
        },
      },
    }),
    "right": ref<MotionVariants>({
      initial: {
        opacity: 0,
        y:800,
      },
      enter: {
        opacity: 1,
        y:0,
        transition: {
          delay: 300,
        },
      },
    }),
  },
  4:{
    "left": ref<MotionVariants>({
      initial: {
        opacity: 0,
        x: -500,
      },
      enter: {
        opacity: 1,
        x: 0,
        transition: {
          delay: 300,
        },
      },
    }),
    "right": ref<MotionVariants>({
      initial: {
        opacity: 0,
        x: 500,
      },
      enter: {
        opacity: 1,
        x: 0,
        transition: {
          delay: 300,
        },
      },
    }),
  },
  5:{
    "left": ref<MotionVariants>({
      initial: {
        opacity: 0.5,
        x: -500,
        transform: 'skewX(10deg)'
      },
      enter: {
        opacity: 1,
        x: 0,
        transform: 'skewX(0deg)',
        transition: {
          delay: 500,
        },
      },
    }),
    "right": ref<MotionVariants>({
      initial: {
        opacity: 0.5,
        x: 500,
        transform: 'skewX(-10deg)'
      },
      enter: {
        opacity: 1,
        x: 0,
        transform: 'skewX(0deg)',
        transition: {
          delay: 500,
        },
      },
    }),
  },
}

const useToggleAnimate = () => {

  /*@vueuse/motion*/
  const motion = (targetLeft: HTMLElement, targetRight: HTMLElement) => {
    // const animate = motionAnimates[getRandomInt(1, Object.keys(motionAnimates).length)]
    const animate = motionAnimates[4]
    useMotion(targetLeft, animate.left)
    useMotion(targetRight, animate.right)
  }

  /*底部按钮切换动画*/
  const footerMotion = (target: HTMLElement) => {

    const animate = ref<MotionVariants>({
      initial: {
        opacity: 0,
        y: 60,
      },
      enter: {
        opacity: 1,
        y: 0,
        transition: {
          delay: 300,
        },
      },
    })

    useMotion(target, animate)
  }

  //应用系统动画 1
  const systemMotionOne = (target: HTMLElement) => {
    const animate = ref<MotionVariants>({
      initial: {
        opacity: 0,
        height: '0px',
      },
      visible: {
        opacity: 1,
        height: "36px",
        transition: {
          delay: 300,
        },
      },
    })

    useMotion(target, animate)
  }

  /*应用系统打开关闭*/
  const animeVisible = (target: string, open: boolean, complete?: Function) => {
    anime({
      targets: target,
      opacity: open ? 1: 0,
      easing: 'linear',
      duration: 500,
      complete: complete
    });
  }

  return {
    motion,
    footerMotion,
    systemMotionOne,
    animeVisible
  }
}

export {
  useToggleAnimate
}
